<template>
  <div class="food-card">
    <section class="name ellipsis">{{ cartItem.name }}</section>
    <section class="price">{{ cartItem.price }}</section>
    <section class="num">
      <buy-cart :foods="cartItem" :shopId="shopId" :inCart="inCart"></buy-cart>
    </section>
  </div>
</template>

<script>
import buyCart from "@/components/common/BuyCart";
export default {
  name: "",
  data() {
    return {
      inCart: true,
    };
  },
  props: ["cartItem", "shopId"],
  computed: {},
  components: { buyCart },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang='scss'>
.food-card {
  display: flex;
  justify-content: space-between;

  padding: .6rem .5rem;

  background-color: #fff;

  font-size: .7rem;

  .name {
    width: 55%;
  }
}

</style>
